<template>
  <div class="detail-box w-card">
    <div class="content-box">
      <div class="title-box">
        <span>商户详情</span>
        <!-- <el-button style="margin-left:auto;" @click="confirmHandle">信息维护记录</el-button> -->
        <el-button style="margin-left:auto;" type="primary" @click="editHandle">编辑商户信息</el-button>
      </div>
      <div class="info-box">
        <div class="s-title">商户基本信息</div>
        <div class="jb-info">
          <div class="text-box">
            <div>
              <span>商户名称：</span>
              <span>{{ detailForm.shopName }}</span>
            </div>
            <div>
              <span>联系人：</span>
              <span>{{ detailForm.shopUserName }}</span>
            </div>
            <div>
              <span>联系电话：</span>
              <span>{{ detailForm.shopUserPhone }}</span>
            </div>
            <div>
              <span>商户状态：</span>
              <span
                :style="{'color':detailForm.operationalStatus == 1 ? '#22A800' : '#f40'}">{{ detailForm.operationalStatus == 1 ? '启用' : detailForm.operationalStatus == 0 ? '禁用' : '' }}</span>
            </div>
            <div>
              <span>商户类型：</span>
              <span>{{ detailForm.auditStatus == 1 ? '个人商户' : detailForm.auditStatus == 2 ? '企业商户' : '' }}</span>
            </div>
            <div>
              <span>合作方式：</span>
              <span>{{ detailForm.cooperateType == 1 ? '代理(H5链接)' : detailForm.cooperateType == 2 ? '分销(API对接)' : detailForm.cooperateType == 3 ? '混合(代理+分销)' : '' }}</span>
            </div>
            <div>
              <span>合约时间：</span>
              <span>{{ detailForm.cooperateStartTime ? getDateTime(detailForm.cooperateStartTime)[8] : '' }}~{{ detailForm.cooperateEndTime ? getDateTime(detailForm.cooperateEndTime)[8] : '' }}</span>
            </div>
            <div>
              <span>开通时间：</span>
              <span>{{ detailForm.createTime ? getDateTime(detailForm.createTime)[6] : '' }}</span>
            </div>
            <div>
              <span>操作人：</span>
              <span>{{ detailForm.createUser }}</span>
            </div>
            <div>
              <span>推荐人：</span>
              <span>{{ detailForm.tjName }}</span>
            </div>
          </div>
          <div class="img-box">
            <el-image style="width: 200px;"
              :src="detailForm.auditStatus == 1 ? detailForm.idcardUrl : detailForm.auditStatus == 2 ? detailForm.licenseUrl : ''"
              :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
              :preview-src-list="[detailForm.auditStatus == 1 ? detailForm.idcardUrl : detailForm.auditStatus == 2 ? detailForm.licenseUrl : '']"
              :initial-index="4" fit="cover" />
            <span
              style="color:#aaaaaa;">{{ detailForm.auditStatus == 1 ? '身份证人像面照片' : detailForm.auditStatus == 2 ? '营业执照' : '' }}</span>
          </div>
        </div>
        <div class="s-title">销售权限信息</div>
        <div class="jb-info">
          <div class="text-box2">
            <div>
              <el-tree ref="treeRef" :data="treeData" show-checkbox node-key="goodsId"
                :default-expanded-keys="defaultExpandedKeys" highlight-current :props="defaultProps" @check-change="treeChange" />
            </div>
            <div>
              <span>是否销售所有授权商品：</span>
              <span>{{ detailForm.autoType == 1 ? '是' : '否' }}</span>
            </div>
          </div>
        </div>
        <div class="s-title">商户账户信息</div>
        <div class="jb-info-t">
          <div class="text-box">
            <div>
              <span>账户余额：</span>
              <span>{{ numFormat(detailForm.leftFee) && (numFormat(detailForm.leftFee/10000) + '元') || '' }}</span>
            </div>
            <div>
              <span>充值总额：</span>
              <span>{{ numFormat(detailForm.chargeTotal) && (numFormat(detailForm.chargeTotal/10000) + '元') || '' }}</span>
              <el-link type="primary" style="margin-left:5px;" @click="lookFlow(1,detailForm)">查看明细</el-link>
            </div>
            <div>
              <span>消费总额：</span>
              <span>{{ numFormat(detailForm.usedTotal) && (numFormat(detailForm.usedTotal/10000) + '元') || '' }}</span>
              <el-link type="primary" style="margin-left:5px;" @click="lookFlow(2,detailForm)">查看明细</el-link>
            </div>
          </div>
        </div>
        <div class="s-title">佣金账户信息</div>
        <div class="jb-info-t">
          <div class="text-box">
            <div>
              <span>佣金账户余额：</span>
              <span>{{ numFormat(detailForm.incomeRest) && (numFormat(detailForm.incomeRest/10000) + '元') || '' }}</span>
            </div>
            <div>
              <span>冻结金额：</span>
              <span>{{ numFormat(detailForm.incomeFreezen) && (numFormat(detailForm.incomeFreezen/10000) + '元') || '' }}</span>
              <el-link type="primary" style="margin-left:5px;" @click="lookFlow(5,detailForm)">查看明细</el-link>
            </div>
            <div>
              <span>累计佣金总额：</span>
              <span>{{ numFormat(detailForm.incomeTotal) && (numFormat(detailForm.incomeTotal/10000) + '元') || '' }}</span>
              <el-link type="primary" style="margin-left:5px;" @click="lookFlow(3,detailForm)">查看明细</el-link>
            </div>
            <div>
              <span>累计提现总额：</span>
              <span>{{ numFormat(detailForm.incomeWithdraw) && (numFormat(detailForm.incomeWithdraw/10000) + '元') || '' }}</span>
              <el-link type="primary" style="margin-left:5px;" @click="lookFlow(4,detailForm)">查看明细</el-link>
            </div>
          </div>
        </div>
        <div class="s-title">生产信息</div>
        <div class="jb-info-th">
          <div class="text-box">
            <div>
              <span>代理订单总数：</span>
              <span>{{ numFormat(detailForm.zh) || '' }}</span>
            </div>
            <div>
              <span>成功数：</span>
              <span>{{ numFormat(detailForm.zh) || '' }}</span>
            </div>
          </div>
          <div class="text-box">
            <div>
              <span>累计佣金总额：</span>
              <span>{{ numFormat(detailForm.zh) || '' }}</span>
            </div>
            <div>
              <span>累计提现总额：</span>
              <span>{{ numFormat(detailForm.zh) || '' }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { nextTick, onMounted, reactive, ref, toRefs } from 'vue'
import { warningDeal, getDateTime, numFormat } from '@/utils/utils'
import { useRoute, useRouter } from 'vue-router'
import api from './api'
export default {
  setup() {
    const route = useRoute()
    const router = useRouter()

    const treeRef = ref(null)

    const state = reactive({
      detailForm: {},
      treeData: [],
      defaultExpandedKeys: [],
      defaultProps: {
        label: 'goodsName',
        children: 'children',
      },
    })

    async function getDetail(shopId) {
      const obj = {
        shopId
      }
      await api.shopDetail(obj).then(res => {
        if (res.code == '200') {
          state.detailForm = res.data
          getTree()
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function editHandle() {
      router.push({ path: '/storeInfo/edit', query: { shopId: state.detailForm.shopId } })
    }

    function treeChange() {
      let myArr = treeRef.value.getCheckedNodes()
      const menuIdList = []
      myArr.map(item => {
        if (item.parentId) {
          menuIdList.push(item.parentId)
        }
        menuIdList.push(item.goodsId)
      })
      state.detailForm.authGoodsIds = menuIdList
    }

    //回显树
    function setClickBox(data) {
      const chooseList = []
      let arrLength = 0
      for (let i = 0; i < data.length; i++) {
        if (data[i].children && data[i].children.length > 0) {
          data[i].children.forEach(item => {
            chooseList.push(item)
            arrLength++
          })
        } else {
          chooseList.push(data[i])
          arrLength++
        }
      }
      nextTick(() => {
        treeRef.value.setCheckedKeys(chooseList)
        treeChange()
      })
    }

    function setTree(list) {
      list && list.map(item => {
        item.disabled = true
        item.children = item.categoryTreeInfoList || item.brandTreeInfoList || item.goodsTreeInfoList
        item.goodsName = item.typeName || item.categoryName || item.brandName || item.goodsName
        item.goodsId = item.goodsId || item.brandId || item.categoryId || item.typeId
        item.parentId = item.brandId || item.categoryId || item.typeId
        if (item.children) {
          setTree(item.children)
        }
      })
    }

    function getTree() {
      api.goodsInfoTree().then(res => {
        if (res.code == '200') {
          state.treeData = res.data
          state.defaultExpandedKeys = state.detailForm.authGoodsIds
          setTree(state.treeData)
          setClickBox(state.detailForm.authGoodsIds)
        } else {
          warningDeal(res.msg)
        }
      }).catch(err => {
        console.log(err)
      })
    }

    function lookFlow(i, data) {
      switch (i) {
        case 1:
          //充值总额
          router.push({ path: '/accountMng/chongzhi', query: { shopId: data.shopId } })
          break
        case 2:
          //消费总额
          router.push({ path: '/accountMng/xiaofei', query: { shopId: data.shopId } })
          break
        case 3:
          //累计分润
          router.push({ path: '/accountMng/fenrun', query: { shopId: data.shopId } })
          break
        case 4:
          //已提现佣金
          router.push({ path: '/accountMng/tixian', query: { shopId: data.shopId } })
          break
        case 5:
          //冻结佣金
          router.push({ path: '/accountMng/dongjie', query: { shopId: data.shopId } })
          break
      }
    }

    onMounted(async () => {
      const shopId = route.query.shopId
      await getDetail(shopId)
    })

    return {
      ...toRefs(state),
      treeRef,
      editHandle,
      getDateTime,
      numFormat,
      lookFlow,
    }
  }
}
</script>

<style lang="scss" scoped>
.detail-box {
  height: 100%;
  box-sizing: border-box;
  padding: 20px;
  overflow: hidden;
  .content-box {
    height: 100%;
    display: flex;
    flex-flow: column;
    gap: 10px;
    .title-box {
      display: flex;
      align-items: center;
      > span {
        font-size: 16px;
        font-weight: bold;
      }
    }
    .info-box {
      flex-grow: 1;
      overflow-y: auto;
      .jb-info {
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 10px;
        .text-box {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          width: 80%;
          gap: 20px;
          > div {
            font-size: 14px;
            width: 30%;
            flex-shrink: 0;
            > span {
              &:last-of-type {
                color: #5a5a5a;
              }
            }
          }
        }
        .text-box2 {
          display: flex;
          flex-flow: column;
          width: 80%;
          gap: 20px;
          > div {
            &:first-of-type {
              border: 1px solid #b4b4b4;
              box-sizing: border-box;
              padding: 20px;
            }
            font-size: 14px;
            width: 50%;
            flex-shrink: 0;
            > span {
              &:last-of-type {
                color: #5a5a5a;
              }
            }
          }
        }
        .img-box {
          width: 20%;
          display: flex;
          flex-flow: column;
          align-items: center;
          font-size: 14px;
          > img {
            width: 100%;
            max-width: 200px;
          }
        }
      }
      .jb-info-t {
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 10px;
        .text-box {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          width: 100%;
          > div {
            font-size: 14px;
            width: 25%;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            > span {
              flex-shrink: 0;
              &:last-of-type {
                color: #5a5a5a;
              }
            }
          }
        }
      }
      .jb-info-th {
        box-sizing: border-box;
        padding: 10px;
        .text-box {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          width: 100%;
          &:not(:first-of-type) {
            margin-top: 10px;
          }
          > div {
            font-size: 14px;
            width: 25%;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            > span {
              flex-shrink: 0;
              &:last-of-type {
                color: #5a5a5a;
              }
            }
          }
        }
      }
    }
  }
}
.s-title {
  font-size: 14px;
  font-weight: bold;
  padding: 10px 0;
  border-bottom: 1px solid #cecece;
}
</style>